<!DOCTYPE html>
<html>
	<head>
		<title>Performance tests of various datatables</title>
	</head>
	<body>

		<div id="node"></div>

		<script src="../../../build/yui/yui.js"></script>

		<script>
			 var Y = YUI({
                filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw'
              }).use('node', function(Y) {
			  YNode = Y.Node;
			  YSub = Y.Lang.sub;

				//createTableFromYNode();
				// 			  	Y.one('#node table').remove();
				//usingDOM();
				// Y.one('#node table').remove();
				superLongCrazyString();
			 });



				//This table is generated through a series of node creations using Y.Node.create()
				function createTableFromYNode() {
					var TEMPLATE_TABLE = '<table></table>',
				    TEMPLATE_COL = '<col></col>',
				    TEMPLATE_THEAD = '<thead></thead>',
				    TEMPLATE_TBODY = '<tbody></tbody>',
				    TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>',
				    TEMPLATE_TR = '<tr id="{id}"></tr>',
				    TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div>{value}</div></td>',
				    TEMPLATE_VALUE = '{value}',
				    TEMPLATE_MSG = '<tbody></tbody>',

					tblNode = YNode.create(TEMPLATE_TABLE),
					tBodyNode = YNode.create(TEMPLATE_TBODY),
					trNode = YNode.create(TEMPLATE_TR);

					for (var i = 0; i <= 10000; ++i) {

						if (i%10 === 0 && i !== 0) {
							tBodyNode.append(trNode);
							trNode = YNode.create(TEMPLATE_TR);
						}

						var tdNode = YNode.create(YSub(TEMPLATE_TD, {value:i}));
						trNode.append(tdNode);

					}

					tblNode.append(tBodyNode);
					Y.one('#node').append(tblNode);

				}

				function cloneTr() {
					var TEMPLATE_TABLE = '<table></table>',
				    TEMPLATE_COL = '<col></col>',
				    TEMPLATE_THEAD = '<thead></thead>',
				    TEMPLATE_TBODY = '<tbody></tbody>',
				    TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>',
				    TEMPLATE_TR = '<tr id="{id}"></tr>',
				    TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div>{value}</div></td>',
				    TEMPLATE_VALUE = '{value}',
				    TEMPLATE_MSG = '<tbody></tbody>',

					tblNode = YNode.create(TEMPLATE_TABLE),
					tBodyNode = YNode.create(TEMPLATE_TBODY),
					trNode = YNode.create(TEMPLATE_TR);
				}

				//This table is created in a similar way to the Y.Node.create() table, except it bypasses
				//node and uses direct DOM methods
				function usingDOM() {
					var TEMPLATE_TABLE = '<table></table>',
				    TEMPLATE_COL = '<col></col>',
				    TEMPLATE_THEAD = '<thead></thead>',
				    TEMPLATE_TBODY = '<tbody></tbody>',
				    TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>',
				    TEMPLATE_TR = '<tr id="{id}"></tr>',
				    TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div>{value}</div></td>',
				    TEMPLATE_VALUE = '{value}',
				    TEMPLATE_MSG = '<tbody></tbody>',

					tbl = document.createElement("table"),
					tbody = document.createElement("tbody"),
					tr = document.createElement("tr");

					for (var i = 0; i <= 10000; ++i) {

						if (i%10 === 0 && i !== 0) {
							tbody.appendChild(tr);
							tr = document.createElement("tr");
						}

						var td = document.createElement("td"),
						liner = document.createElement('div');
						liner.innerHTML = YSub(TEMPLATE_VALUE, {value:i});
						td.appendChild(liner);
						tr.appendChild(td);

					}

					tbl.appendChild(tbody);
					document.getElementById('node').appendChild(tbl);
				}

				//This method generates a super long string, and performs 1 Y.Node.create() operation
				function superLongCrazyString() {

					var TEMPLATE = {
						OPEN_TABLE: '<table>',
						CLOSE_TABLE: '</table>',

						OPEN_TBODY: '<tbody>',
						CLOSE_TBODY: '</tbody>',

						OPEN_TR: '<tr id="{id}">',
						CLOSE_TR: '</tr>',

						TH: '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}"><div>{value}</div></th>'
					},

					str = TEMPLATE.OPEN_TABLE + TEMPLATE.OPEN_TBODY,
					table;


					for (var i = 0; i < 10000; ++i) {

						if (i%10 === 0) {
							str += TEMPLATE.OPEN_TR;
						}

						str += YSub(TEMPLATE.TH, {value:i});

						if (i%10 === 9) {
							str += TEMPLATE.CLOSE_TR;
						}

					}

					table = YNode.create(str);
					Y.one('#node').append(table);

				}


		</script>
	</body>
</html>


</script>
